import React from 'react';
import { connect } from 'dva';
import { Button, InputNumber } from 'antd';
import ReactEcharts from 'echarts-for-react';

function MaxCompress({
    dataArr,
    dispatch,
    maxCompressArr,
    maxCompressArr1,
    maxCompressArr2,
    maxCompressArr3,
    maxCompressArr4,
    maxCompressArr5,
    maxCompressArr6,
    maxCompressArr7,
}) {
	var colorArr = [ '#1890ff', '#2fc25b', '#facc14', '#223273', '#8543e0', '#13c2c2', '#3436c7', '#f04864' ];


	var arr = new Array(1000);

	var i = arr.length;

	while (i--) {
		arr[i] = i;
	}

	var echartsOption = {
		title: {
			text: '最大值压缩'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			data: [ '曲线', '曲线1', '曲线2', '曲线3', '曲线4', '曲线5', '曲线6', '曲线7' ],
			width: 800,
			height: 700
		},
		color: colorArr,
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				dataView: { show: true, readOnly: false },
				// magicType : {show: true, type: ['line', 'bar']},
				saveAsImage: {} //存取为图片
			}
		},

		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: arr
		},
		yAxis: {
			type: 'value',
			// min: -0.13,
			// max: 0.04
		},
		dataZoom: [
			{
				type: 'slider',
				show: true,
				start: 0,
				end: 1,
				handleSize: 1
			}
		],

		series: [
			{
				name: '曲线',
				type: 'line',
				stack: '总量',
				data: maxCompressArr,
				smooth: true
			},

			{
				name: '曲线1',
				type: 'line',
				stack: '总量',
				data: maxCompressArr1,
				smooth: true
			},

			{
				name: '曲线2',
				type: 'line',
				stack: '总量',
				data: maxCompressArr2,
				smooth: true
			},
			{
				name: '曲线3',
				type: 'line',
				stack: '总量',
				data: maxCompressArr3,
				smooth: true
			},
			{
				name: '曲线4',
				type: 'line',
				stack: '总量',
				data: maxCompressArr4,
				smooth: true
			},
			{
				name: '曲线5',
				type: 'line',
				stack: '总量',
				data: maxCompressArr5,
				smooth: true
			},
			{
				name: '曲线6',
				type: 'line',
				stack: '总量',
				data: maxCompressArr6,
				smooth: true
			},
			{
				name: '曲线7',
				type: 'line',
				stack: '总量',
				data: maxCompressArr7,
				smooth: true
			}
		]
	};
	// console.log(echartsOption.series)

	function onChange(value) {
		dispatch({
			type: 'echart/setState',
			payload: {
				maxCompress: value
			}
		});
	}
	function onClick() {
		dispatch({
			type: 'echart/Maxyasuo',
			payload: {}
		});
	}
	return (
		<div>
			<div style={{ position: 'relative' }}>
				<div style={{ position: 'absolute', top: -30, right: 270 }}>
					<span style={{ marginRight: 30, fontSize: 16 }}>请输入压缩范围:</span>
				
					<span>
						 <InputNumber min={0} max={5400} defaultValue={1} onChange={onChange} />
					</span>
					<Button type="primary" style={{ marginLeft: 30 }} onClick={onClick}>
						确认
					</Button>
				</div>
			</div>

			<ReactEcharts
				// ref={(e) => { this.echartsElement = e }}

				style={{ height: 700 }}
				option={echartsOption}
				theme="clear"
			/>
		</div>
	);
}
// export default LineMarkerEcharts;
export default connect(({ echart }) => ({ ...echart }))(MaxCompress);
